<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>关系</title>
	<style type="text/css">
		.red{
			background: red;
		}
		ul li {
			transition: all .3;
		}
		.hover{
			opacity: 0.5;
		}
	</style>
</head>
<body>
	
	<ul>
		<li>item1</li>
		<li class="red">item2</li>
		<li>item3</li>
		<li>item4</li>
		<li>item5</li>
	</ul>

	<div class="ly">
		<p class="content">前面的留言...</p>
		<span>具体的留言....</span>
	</div>
	
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
		var lis = $('ul li')

		// lis.mouseover(function(){
		//  	$(this).css('backgroundColor', 'green')
		// })
		// lis.mouseout(function(){
		//  	$(this).css('backgroundColor', '')
		// })
		
		// 等同上面的方法
		lis.hover(function(){ // mouseover
			// $(this).css('backgroundColor', 'green')
			$(this).css({'color':'white', 'backgroundColor':'green' })
			// 使用回调函数通过程序处理属性值，最后返回新的属性值
			$(this).css('fontSize', function(index, value) {
				return parseInt(value) * 1.8
			})
			// 直接操作class
			$(this).addClass('hover')

		},function(){ // mouseout
			// $(this).css('backgroundColor', '')
			$(this).css( {'backgroundColor': '', 'color':'black'} )
			$(this).css('fontSize', function(index, value) {
				return parseInt(value) / 1.8
			})
			$(this).removeClass('hover')
		})	

		// 获取css
		console.log($('.red').css('width'))

		$('.content').next().hide()
		// 留言板的显示和隐藏
		$('.content').click(function(){
			$(this).next().toggle()
		})

	</script>
</body>
</html>